<template>
	<view class="container">
		<!-- navbar -->
		<u-navbar :title-bold='true' title='民间感恩赞助' :border-bottom='false'></u-navbar>
		<!-- main -->
		<view class="note">
				您对护航员付出的每一份认可、支持，<br/>
				都可以变成实物，<br/>
				由爱心邻居赞助为您买单！<br/>
				<text style="color:yellow">凭30天内，对护航员的认可记录，</text><br/>
				<text style="color:yellow">去爱心邻居店铺换取实物，9折。</text><br/>
		</view>
		
		<view class="cards">
			<!-- <button type="primary" class="btu":disabled="exist" @click="goTo('/pages/center/applySponser')"> {{exist?"已申请":"申请入驻"}}</button> -->
			<button type="primary" class="btu" @click="goTo('/pages/center/applySponser')"> 申请入驻</button>
			<view class="search">
				<view class="search-box">
					<u-search @search="search()" :show-action='false' v-model="keywords" class="search-box-u-search"
						placeholder="搜索" :clearabled="true" :animation="true"></u-search>
				</view>
			</view>
			<view class="item" style="margin-top: 10px;">
				<view class="left">市、县</view>
				<view class="right" @click="picker=true">
					<view class="address" v-if="region">{{region}}</view>
					<view class="placeholder sex" v-else>请选择</view>
				</view>
				<u-icon name="arrow-right" size="24"></u-icon>
			</view>
			<!--list-->
			<view class="title"><text>本地现有赞助</text></view>
			<!-- 朋友圈列表 -->
			<view class="content-circle">
				<view class="content-circle-box" v-for="(item, index) in list" :key="item.id">
					<view class="headimg"><image class="img" :src="item.avatar" @tap="toUserInfo(item.user_id)"></image></view>
					<view class="content">
						<view class="content-name ztext" @tap="toUserInfo(item.user_id)">{{ item.username }}</view>
						<text class="content-desc ztext">9折赞助时间：{{item.starttime}}-{{item.endtime}}</text>
						<view class="content-desc ztext">特色产品：{{item.featured_products}}</view>
						<view class="content-img" v-if="item.pictures2.length">
							<!-- //只有一张图时候 -->
							<view v-if="item.pictures2.length == 1"><image class="img-1" :src="item.pictures2[0]" mode="widthFix" @tap="previewImg(0, item.pictures2)"></image></view>
							<!-- 有多张图的时候 -->
							<view v-else-if="item.pictures2.length > 1">
								<view class="content-img-more">
									<image
										class="img-more"
										v-for="(src, index) in item.pictures2"
										:key="index"
										:class="index % 3 == 0 && 'img-3'"
										:src="src"
										mode="aspectFill"
										@tap="previewImg(index, item.pictures2)"
									></image>
								</view>
							</view>
						</view>
						<u-collapse>
						<u-collapse-item title="店铺详情" :show-arrow="false" ref="uCollapse" @change="resizeCollapse(index)">
						<view class="content-desc ztext">民间爱心店名：{{ item.name }}</view>
						<view class="content-desc ztext">详细地址：{{item.region}}{{ item.address }}</view>

						<view class="content-img" v-if="item.pictures.length">
							<view>店面图片：</view>
							<!-- //只有一张图时候 -->
							<view v-if="item.pictures.length == 1"><image class="img-1" :src="item.pictures[0]" mode="widthFix" @tap="previewImg(0, item.pictures)"></image></view>
							<!-- 有多张图的时候 -->
							<view v-else-if="item.pictures.length > 1">
								<view class="content-img-more">
									<image
										class="img-more"
										v-for="(src, index) in item.pictures"
										:key="index"
										:class="index % 3 == 0 && 'img-3'"
										:src="src"
										mode="aspectFill"
										@tap="previewImg(index, item.pictures)"
									></image>
								</view>
							</view>
						</view>
						<view class="content-img" v-if="item.lisense">
							<view>营业执照：</view>
							<image class="img-1" :src="item.lisense" mode="widthFix" @tap="previewImg(0, [item.lisense])"></image>
						</view>
						</u-collapse-item>
						</u-collapse>
						<!-- 相对时间 点赞按钮等 -->
						<view class="relavivetime" :id="`comment-${'null'}-${index}`">
							<view class="time">{{ item.createtime }}</view>
							<view class="icon-box">
								<view @tap="handleComment(item.id, null, index)">
									<image class="img icon-box-item" :src="require('@/static/icon/comment.png')" mode=""></image>
								</view>
							</view>
						</view>
						<!-- 点赞人 评论 -->
						<view class="msg-box">
							<view class="comment" v-if="item.comments.length">
								<view
									class="comment-box"
									v-for="(comment, index) in item.comments"
									:key="index"
									hover-class="comment-hover-class"
									:id="`comment-${item.circleMegId}-${index}`"
								>
									<text class="comment-box-name ztext" @tap.stop="toUserInfo(comment.user_id)">{{ comment.username }} ：</text>
									<text class="comment-box-content ztext">{{ comment.content }}</text>
										<view class="content-img" v-if="comment.pictures && comment.pictures.length>0">
											<!-- //只有一张图时候 -->
											<view v-if="comment.pictures.length == 1"><image class="img-1" :src="comment.pictures[0]" mode="widthFix" @tap="previewImg(0, comment.pictures)"></image></view>
											<!-- 有多张图的时候 -->
											<view v-else-if="comment.pictures.length > 1">
												<view class="content-img-more">
													<image
														class="img-more"
														v-for="(src, index) in comment.pictures"
														:key="index"
														:class="index % 3 == 0 && 'img-3'"
														:src="src"
														mode="aspectFill"
														@tap="previewImg(index, comment.pictures)"
													></image>
												</view>
											</view>
										</view>
									<view class="comment-box-date">{{ item.createtime }}</view>
								</view>
							</view>
						</view>
					</view>

				</view>
				<!-- #ifdef H5 -->
				<view :style="{ height: showInput ? '100rpx' : 0 }"></view>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<view v-show="showInput" :style="{ height: viewOffsetBottom + 'px' }"></view>
				<!-- #endif -->
			</view>
			<!--list end-->
			<!--history start-->
			<view class="title"><text>本地过往赞助</text></view>
			<!-- 朋友圈列表 -->
			<view class="content-circle">
				<view class="content-circle-box" v-for="(item, index) in history" :key="item.id">
					<view class="headimg"><image class="img" :src="item.avatar" @tap="toUserInfo(item.user_id)"></image></view>
					<view class="content">
						<view class="content-name ztext">{{ item.username }}</view>
						<view style="filter: blur(10px)" class="content-desc ztext">{{ item.name }}</view>
						<view style="filter: blur(10px)" class="content-img" v-if="item.pictures.length">
							<!-- //只有一张图时候 -->
							<view v-if="item.pictures.length == 1"><image class="img-1" :src="item.pictures[0]" mode="widthFix"></image></view>
							<!-- 有多张图的时候 -->
							<view v-else-if="item.pictures.length > 1">
								<view class="content-img-more">
									<image
										class="img-more"
										v-for="(src, index) in item.pictures"
										:key="index"
										:class="index % 3 == 0 && 'img-3'"
										:src="src"
										mode="aspectFill"
									></image>
								</view>
							</view>
						</view>
						<!-- 相对时间 点赞按钮等 -->
						<view style="filter: blur(10px)" class="relavivetime" :id="`comment-${'null'}-${index}`">
							<view class="time">{{ item.createtime }}</view>
							<view class="icon-box">
								<view>
									<image class="img icon-box-item" :src="require('@/static/icon/comment.png')" mode=""></image>
								</view>
							</view>
						</view>
						<!-- 点赞人 评论 -->
						<view style="filter: blur(10px)" class="msg-box">
							<view class="comment" v-if="item.comments.length">
								<view
									class="comment-box"
									v-for="(comment, index) in item.comments"
									:key="index"
									hover-class="comment-hover-class"
									:id="`comment-${item.circleMegId}-${index}`"
								>
				
									<text class="comment-box-name" >{{ comment.username }}(手机{{ comment.phone}}) ：</text>
									<text class="comment-box-content">{{ comment.content }}</text>
									<view class="content-img" v-if="comment.pictures && comment.pictures.length">
										<!-- //只有一张图时候 -->
										<view v-if="comment.pictures.length == 1"><image class="img-1" :src="comment.pictures[0]" mode="widthFix" @tap="previewImg(0, comment.pictures)"></image></view>
										<!-- 有多张图的时候 -->
										<view v-else-if="comment.pictures.length > 1">
											<view class="content-img-more">
												<image
													class="img-more"
													v-for="(src, index) in comment.pictures"
													:key="index"
													:class="index % 3 == 0 && 'img-3'"
													:src="src"
													mode="aspectFill"
												></image>
											</view>
										</view>
									</view>
									<view class="comment-box-date">
											{{ item.createtime }}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- #ifdef H5 -->
				<view :style="{ height: showInput ? '100rpx' : 0 }"></view>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<view v-show="showInput" :style="{ height: viewOffsetBottom + 'px' }"></view>
				<!-- #endif -->
			</view>
			<!--history end-->
		</view>
		<!--bto -->
		<view class="bto">专业人士在线 | 业余咨询 | 专业回访 | 定时解答</view>
		<u-picker v-model="picker" :defaultCode="pickerValue" mode="region" @confirm='confirmPicker()' @cancel='cancelPicker()'></u-picker>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		sponserList
	} from '@/api/index.js'
	export default {
		data() {
			return {
				picker: false,
				TODOCount: 0,
				region:"",
				pickerValue:[0,0,0],
				collectionCount: 0,
				logoutShow: false,
				exist:true,
				kf: '',
				keywords:"",
				list: [],
				history:[],
				page:1,
			}
		},
		onLoad(e) {
			this.page = 1
			this.list = []
			this.init()
		},
		onReachBottom() { //监听页面触底函数
			// this.init()
		},
		onShow: function() {

		},
		methods: {
			goTo(url) {
				console.log(url);
				uni.navigateTo({
					url: url
				})
			},
			handleComment(id){
				this.goTo("/pages/center/sponserComment?sponserId="+id);
			},
			// 放大预览
			previewImg(current, imgList) {
				uni.previewImage({
					current,
					urls: imgList,
					// #ifndef MP-WEIXIN
					indicator: 'number'
					// #endif
				});
			},
			toUserInfo(userId){
					// console.log(this.info,'this.info');
					// if (this.info.sessionUser.job == 2 || this.info.sessionUser.job == '2') {
				let url = '/sub/center/mine/userInfo?id=' + userId
				uni.navigateTo({
					url: url
				})
					// }	
			},
			init() {
				let obj = {
					'page': this.page,
					'per_page': 10,
					'province': this.pickerValue[0],
					'city': this.pickerValue[1],
					'area': this.pickerValue[2],
					'keywords': this.keywords,
				}
				this.page++
				sponserList(obj).then(res => {
					if (res.code == 1) {
						if(this.list.length>0){
							this.list = [...this.list, ...res.data.list]
						}else{
							this.list = res.data.list
						}
						this.exist = res.data.exist
						this.history = res.data.history
					} else {
						this.page--
						this.$refs.uToast.show({
							title: res.msg
						})
					}
				})
			},
			pageDataLoad: function(refresh = false) {
				var that = this
				this.ws.send({
					c: 'User',
					a: 'center',
					data: {
						'id': that.info.id,
						'refresh': refresh
					}
				})
			},
			confirmPicker(e) {
				console.log(e)
				this.region = e.province.label + '-' + e.city.label + '-' + e.area.label
				this.pickerValue = [e.province.value,e.city.value,e.area.value];
				this.list=[];
				this.page=1;
				this.init();
			},
			search: function() {
				
				this.list=[];
				this.page=1;
				this.init();
			},
			cancelPicker(e){
				this.region = "";
				this.pickerValue=[0,0,0];
				this.list=[];
				this.page=1;
				this.init();
			},
			resizeCollapse(index){
				console.log(this.$refs.uCollapse[index])
				this.$nextTick(() => {  
				    this.$refs.uCollapse[index].init()  
				})
			}
		}
	}
</script>

<style lang="scss">
	.ztext{
		word-spacing: 0px;
		letter-spacing: 0px;
	}
	.collapse-title{
		color: #36648b;
	}
	::v-deep .is-open + .uni-collapse-item__wrap {
		height:auto !important;
	}
	.content-circle {
			&-box {
				padding: 18rpx 0rpx;
				border-bottom: 1rpx solid #f2eeee;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: flex-start;
				.headimg {
					width: 80rpx;
					height: 80rpx;
					.img {
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
				}
	
				.content {
					flex: 1;
					padding-left: 18rpx;
					font-size: 30rpx;
					&-name {
						color: #36648b;
					}
					&-desc {
						color: $u-main-color;
						padding-top: 6rpx;
						line-height: 34rpx;
					}
					&-img {
						margin-top: 10rpx;
						.img-1 {
							will-change: tru-bg-coloransform;
							width: 280rpx;
							height: auto;
							max-height: 400rpx;
						}
						&-more {
							display: flex;
							flex-wrap: wrap;
							.img-more {
								display: block;
								width: 160rpx;
								height: 160rpx;
								margin: 4rpx;
							}
							.img-3 {
								margin: 4rpx 4rpx 4rpx 0;
							}
						}
					}
					.msg-box {
						width: 100%;
						background-color: $u-bg-color;
						margin-top: 15rpx;
						border-radius: 4rpx;
						.comment {
							padding: 6rpx 8rpx;
							color: $uni-text-color;
							font-size: 28rpx;
							&-box {
								padding: 4rpx 0;
								&-name {
									color: #36648b;
									.callback {
										color: $uni-text-color;
									}
								}
								&-content {
									word-break: break-all;
								}
								&-date {
									color: $uni-text-color-grey;
									width:100%;
									text-align:right;
								}
							}
						}
					}
				}
				.relavivetime {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 26rpx;
					.time {
						color: $uni-text-color-grey;
					}
					.icon-box {
						display: flex;
						align-items: center;
						&-item {
							padding: 4rpx 12rpx;
							border-radius: 6rpx;
							&.thumb {
								margin-right: 10rpx;
							}
						}
						.img {
							width: 34rpx;
							height: 34rpx;
						}
					}
				}
			}
		}

	.slot-wrap {
		color: #FFF;
		padding-left: 30rpx;
		width: 100%;
		max-height: 44px;
		display: flex;
		align-items: flex-start;
		letter-spacing: 2px;
		font-weight: 500;

		image {
			width: 88px;
			margin-right: 20rpx;
			max-height: 44px;
		}

		.navbar {
			// height: 44px;
			// line-height: 50px;
			font-size: 8px;
		}

	}
	.container {
		background-color: #fff;
		min-height: 100vh;
		font-size: 16px;
		.title {
			font-size:36rpx;
			margin:10rpx 0rpx;
			color: #999999;
		}
		.bto {
			position: relative;
			top: -40px;
			color: #999999;
			font-size: 24rpx;
			text-align: center;
		}

		.note {
			background-color: #6EC9E1;
			padding: 40rpx;
			padding-bottom: 60px;
			font-size: 16px;
			color:#fff;
			line-height: 32px;
		}

		.cards {
			border-radius: 30rpx;
			position: relative;
			top: -40px;
			padding: 20rpx 40rpx;
			letter-spacing: 2px;
			min-height: 50vh;
			background-color: #fff;
			.btu {
				margin-top: 20px;
				background-color: #6EC9E1;
				height: 50px;
			}

			.item {
				background-color: #FFF;
				padding: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 15px;
				border-bottom: 1px solid rgba(240, 240, 240, 0.4);

				image {
					height: 50px;
					width: 50px;
					border-radius: 50%;
					margin-right: 10px;
				}

				.left {
					min-width: 80px;
				}

				.right {
					display: inherit;
					width: 100%;

					.input {
						font-size: 14px;
						width: 100%;
						text-align: start;
					}

					.placeholder {
						opacity: 0.8;
						font-size: 14px;
						justify-content: flex-end;
						display: flex;
					}
				}
			}
		}
	}
	.message {
		background: #FFFFFF;
	}
	.search {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.search-box {
		display: flex;
		align-items: center;
		padding: 20rpx 0 10rpx 0;
	}
	
	.search-box {
		width: 100%;
		padding: 20rpx 30rpx;
	}
	
	.search-box-u-search {
		width: 100%;
	}
	
	.search-box .message-menu {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 20rpx;
	}
</style>